<template>
	<view class="radar">
		<canvas canvas-id="myCanvas" id="myCanvas" style="width: 750rpx;height: 750rpx;position: fixed;top: -2000rpx;"/>
		<view class="box-canvas" v-if="canvasShow">
			<image v-if="canvasImg" :src="canvasImg" alt="" class="left-svg"></image>
			<view class="stud-edge1 stud-size">{{ mData[0].name }}<text class="stud-size-text">{{ mData[0].text }}</text></view>
			<view class="stud-edge2 stud-size">{{ mData[1].name }}<text class="stud-size-text">{{ mData[1].text }}</text></view>
			<view class="stud-edge3 stud-size">{{ mData[2].name }}<text class="stud-size-text">{{ mData[2].text }}</text></view>
			<view class="stud-edge4 stud-size">{{ mData[3].name }}<text class="stud-size-text">{{ mData[3].text }}</text></view>
			<view class="stud-edge5 stud-size">{{ mData[4].name }}<text class="stud-size-text">{{ mData[4].text }}</text></view>
		</view>
	</view>
</template>

<script>
	var mCount;
	var mCenter = 400 / 2; //中心点
	var mRadius;
	var mAngle; //角度
	var mData = [];
	var mColorPolygon = '#c7c7c7'; //多边形颜色
	var mColorLines = '#c7c7c7'; //顶点连线颜色
	var mColorText = '#333'; //文本颜色
	var fontSize = 24; //文本字体大小
	var manyWidth = 1.5; //多边形线宽度
	var topWidth = 1.5; //顶点连线宽度
	export default{
		name:'radar',
		props:{
			mData:{
				type: Array,
				default(){
					return []
				}
			}
		},
		watch:{
			mData(newVal){
				this.drawLoad();
			}
		},
		data(){
			return {
				canvasImg:'',
				canvasShow:false,
				// mData:[
				// 	{number: 60, name: "车龄", text: "一般"},
				// 	{number: 144, name: "性价比", text: "144.00%"},
				// 	{number: 90, name: "里程", text: "较短"},
				// 	{number: 60, name: "三年保值率", text: "60.00%"},
				// 	{number: 90, name: "价格", text: "较低"},
				// ]
			}
		},
		created() {
			this.drawLoad();
		},
		methods:{
			drawLoad(){
				mData = this.mData;
				mCount = this.mData.length; //边数
				mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
				mAngle = Math.PI * 2 / mCount; //角度
				
				let mCtx = uni.createCanvasContext("myCanvas",this); //自定义组件中第二个参数带入this  uni.createCanvasContext({}, this)
				this.drawPolygon(mCtx);// 绘制多边形边
				this.drawLines(mCtx);//顶点连线
				this.drawRegion(mCtx);//绘制数据区域
				// this.drawText(mCtx);//绘制文本
				// this.drawCircle(mCtx); //数据顶点
				this.drawLines1(mCtx)//数据点之间的连线
				
				mCtx.draw(true, () => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							success: (res) => {
								// 在H5平台下，tempFilePath 为 base64
								this.canvasImg = res.tempFilePath;
								this.canvasShow = true;
							},
							fail: () => {
								uni.showToast({
									title: '生成失败',
									duration: 2000
								});
							}
						},this) //自定义组件中第二个参数带入this  uni.canvasToTempFilePath({}, this)
					}, 100)
				})
			},
			drawPolygon(ctx){ // 绘制多边形边
				ctx.save();
				
				ctx.setStrokeStyle(mColorPolygon);
				// var r = mRadius/ mCount; //单位半径 画五个五边形
				var r = mRadius/ (mCount-2); //单位半径  画三个五边形
				//画5个圈
				// for(var i = 0; i < mCount; i ++){ // 画五个五边形
				 for(var i = 0; i < mCount-2; i ++){ // 画三个五边形
				    ctx.beginPath();
				    var currR = r * ( i + 1); //当前半径
				    //画5条边
				    for(var j = 0; j < mCount; j ++){
				        var x = mCenter + currR * Math.cos(mAngle * j);
				        var y = mCenter + currR * Math.sin(mAngle * j);
				
				        ctx.lineTo(x, y);
				    }
				    ctx.closePath()
					ctx.setLineWidth(manyWidth) //宽度
				    ctx.stroke();
				}
				ctx.restore();
			},
			//顶点连线
			drawLines(ctx){
			    ctx.save();
			
			    ctx.beginPath();
			    ctx.strokeStyle = mColorLines;
			
			    for(var i = 0; i < mCount; i ++){
			        var x = mCenter + mRadius * Math.cos(mAngle * i);
			        var y = mCenter + mRadius * Math.sin(mAngle * i);
			
			        ctx.moveTo(mCenter, mCenter);
			        ctx.lineTo(x, y);
			    }
				ctx.setLineWidth(topWidth) //宽度
			    ctx.stroke();
			
			    ctx.restore();
			},
			//数据点之间的连线
			drawLines1(ctx){
			    ctx.save();
			    ctx.beginPath();
			    var count = 0;
			    for(var i = 0; i < mCount; i ++){
					console.log(555,(mData[i].number))
			        var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i].number / 100;
			        var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i].number / 100;
			        count = i + 1;
			        if (count < mCount) {
			            var x1 = mCenter + mRadius * Math.cos(mAngle * (i+1)) * mData[i+1].number / 100;
			            var y1 = mCenter + mRadius * Math.sin(mAngle * (i+1)) * mData[i+1].number / 100;
			        }else{
			            var x1 = mCenter + mRadius * Math.cos(mAngle * 0) * mData[0].number / 100;
			            var y1 = mCenter + mRadius * Math.sin(mAngle * 0) * mData[0].number / 100;
			        }
			        ctx.moveTo(x, y);
			        ctx.lineTo(x1, y1);
			        ctx.lineWidth = 2;          //设置线宽状态
			        ctx.strokeStyle = '#EB6E10';  //设置线的颜色状态
			    }
			    ctx.stroke();
			
			    ctx.restore();
			},
			//绘制文本
			drawText(ctx){
			    ctx.save();
			
			    ctx.font = fontSize + 'px Microsoft Yahei';
			    ctx.fillStyle = mColorText;
			
			    for(var i = 0; i < mCount; i ++){
			        var x = mCenter + mRadius * Math.cos(mAngle * i);
			        var y = mCenter + mRadius * Math.sin(mAngle * i);
			
			        if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
			            ctx.fillText(mData[i].name, x, y + fontSize);
			        }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
			            ctx.fillText(mData[i].name, x - ctx.measureText(mData[i].name).width, y + fontSize);
			        }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
			            ctx.fillText(mData[i].name, x - ctx.measureText(mData[i].name).width, y);
			        }else{
			            ctx.fillText(mData[i].name, x, y);
			        }
			
			    }
			    //中心绘制文字
			    // ctx.font="bold 36px Arial"
			    // ctx.fillStyle='#1478FA'
			    // ctx.fillText("75",mCenter-18,mCenter+16);
			
			    ctx.restore();
			},
			//绘制数据区域
			drawRegion(ctx){
			    ctx.save();
			
			    ctx.beginPath();
			    for(var i = 0; i < mCount; i ++){
			        var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i].number / 100;
			        var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i].number / 100;
			
			        ctx.lineTo(x, y);
			    }
			    ctx.closePath();
			    ctx.fillStyle = 'rgba(254, 203, 128, 0.5)';
			    ctx.fill();
			
			    ctx.restore();
			},
			//画点
			drawCircle(ctx){
			    ctx.save();
			
			    var r = mCenter / 50;
			    for(var i = 0; i < mCount; i ++){
			        var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i].number / 100;
			        var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i].number / 100;
			
			        ctx.beginPath();
			        ctx.arc(x, y, r, 0, Math.PI * 2);
			        ctx.fillStyle = '#EB6E10';
			        ctx.fill();
			    }
			
			    ctx.restore();
			}
		}
	}
</script>

<style>
	.box-canvas {
		margin: 0 auto;
		width: 360rpx;
		height: 360rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.left-svg {
		width: 360rpx;
		height: 360rpx;
		transform: rotate(-90deg);
	}
	.stud-size {
		font-size: 28rpx;
		font-family: FZCuYuan-M03S;
		font-weight: 400;
		color: #333;
		min-width: 170rpx;
	}
	
	.stud-size-text{
		color: #EB6E10;
	}
	
	.stud-edge1 {
		position: absolute;
		top: -24rpx;
		left: 140rpx;
		z-index: 5;
	}
	
	.stud-edge2 {
		position: absolute;
		top: 100rpx;
		left: 350rpx;
		z-index: 5;
	}
	
	.stud-edge3 {
		position: absolute;
		bottom: 10rpx;
		left: 300rpx;
		z-index: 5;
	}
	
	.stud-edge4 {
		position: absolute;
		bottom: 10rpx;
		left: -90rpx;
		z-index: 5;
	}
	
	.stud-edge5 {
		position: absolute;
		top: 115rpx;
		left: -70rpx;
		z-index: 5;
	}
</style>
